<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta name="description" content="长沙市妇幼医院">
    <title>长沙市妇幼医院——饼图</title>
    <script type="text/javascript" src="../../resources/jquery-easyui-1.5.4/jquery.min.js"></script>
    <script type="text/javascript" src="../../resources/echarts/echarts.min.js"></script>
</head>

<body>
	<div id="mainPie" style="width: 500px;height:300px;"></div>
	
	<div id="mainBar" style="width: 800px;height:400px;"></div>
	
	<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('mainPie'));

        // 指定图表的配置项和数据
        var option = "{tooltip : {formatter: '{a} <br/>{b} : {c}%'},toolbox: {show: true,feature: {restore: {show: true},saveAsImage: {show: true}}},series: [{name: '已审核数占比',type: 'gauge',detail: {formatter:'{value}%', fontSize: 20,},data: [{value: 3, name: '已审核数占比'}],radius: '84%',title : {fontWeight: 'bolder',fontSize: 12,fontStyle: 'italic'},axisLine: {show: true,lineStyle: { color: [ [ 0.25,  new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 1,color: '#b45656'}], false) ],  [ 0.5,  new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 1,color: '#fb7575' }], false) ],[ 0.75,  new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 1,color: '#fbab5b'}], false) ],[1,  new echarts.graphic.LinearGradient(0, 0, 0, 1, [ {offset: 0.2,color: '#fbdb53' }], false) ]], width: 17}},} ],}";
		console.log(option)
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(eval("(" + option + ")"));
    
		var barChart = echarts.init(document.getElementById('mainBar'));

		option = {
		    color: ['#3398DB'],
		    tooltip : {
		        trigger: 'axis',
		        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
		            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
		        }
		    },
		    grid: {
		        left: '3%',
		        right: '4%',
		        bottom: '3%',
		        containLabel: true
		    },
		    xAxis : [
		        {
		            type : 'category',
		            data : ['长沙市xxx医院', '长沙县xxx医院', '芙蓉区xxx医院', '宁乡市xxx医院', '浏阳市xxx医院', '雨花区xxx医院', '岳麓区xxx医院'],
		            axisTick: {
		                alignWithLabel: true
		            }
		        }
		    ],
		    yAxis : [
		        {
		            type : 'value'
		        }
		    ],
		    series : [
		        {
		            name:'采血人数',
		            type:'bar',
		            barWidth: '60%',
		            data:[110, 52, 200, 334, 390, 330, 220]
		        }
		    ]
		};
		barChart.setOption(option);
	</script>
    
    <div id="brokenLine" style="width: 800px;height:400px;"></div>
    <script type="text/javascript">
    var brokenLineChart = echarts.init(document.getElementById('brokenLine'));
    option = {
    	    title: {
    	        text: '最近十二天的数据情况'
    	    },
    	    tooltip: {
    	        trigger: 'axis'
    	    },
    	    legend: {
    	        data:['领券数','审核数','抽血数','报告数']
    	    },
    	    grid: {
    	        left: '3%',
    	        right: '4%',
    	        bottom: '3%',
    	        containLabel: true
    	    },
    	    toolbox: {
    	        feature: {
    	            saveAsImage: {}
    	        }
    	    },
    	    xAxis: {
    	        type: 'category',
    	        boundaryGap: false,
    	        data: ['第一天','第二天','第三天','第四天','第五天','第六天','第七天','第八天','第九天','第十天','第十一天','第十二天']
    	    },
    	    yAxis: {
    	        type: 'value'
    	    },
    	    series: [
    	        {
    	            name:'领券数',
    	            type:'line',
    	            stack: '总量',
    	            data:[120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 132, 101]
    	        },
    	        {
    	            name:'审核数',
    	            type:'line',
    	            stack: '总量',
    	            data:[220, 182, 191, 234, 290, 330, 310, 120, 132, 101, 134, 90, 230, 210, 132, 101]
    	        },
    	        {
    	            name:'抽血数',
    	            type:'line',
    	            stack: '总量',
    	            data:[150, 232, 201, 154, 190, 330, 410, 120, 132, 101, 134, 90, 230, 210, 132, 101]
    	        },
    	        {
    	            name:'报告数',
    	            type:'line',
    	            stack: '总量',
    	            data:[320, 332, 301, 334, 390, 330, 320, 120, 132, 101, 134, 90, 230, 210, 132, 101]
    	        }
    	    ]
    	};
    brokenLineChart.setOption(option);
    </script>
</body>
</html>